/****************
 *@description: 宠币账户明细 myPocket/coinsAccount/detail
 *@author: Xhd
 *@API: 纪浩然
 *@date: 2023-11-28 19:38:50
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import VideoPlayer from "@/components/VideoPlayer"
import { getDateTime2 } from '@/utils/getDate'
import { apiGetWebMemberCoinRecordDetailPage } from '@/request/coinsAccount';
import _ from 'lodash';
import GoBack from '@/components/TheGoBack'

import { Modal, Input } from "antd";

const { TextArea } = Input;

class screenAD extends React.Component {
  state = {
    columns: [
      {
        title: "业务编号",
        dataIndex: "coinRecordCode",
        key: "coinRecordCode",
      },
      {
        title: "收支类型",
        dataIndex: "type",
        key: "type",
        render: (text, render) => {
          let label = ''
          switch (text) {
            case "S":
              label = "收入"
              break;
            case "Z":
              label = "支出"
              break;
            default:
              label = "字段值错误"
          }
          return label
        }
      },
      {
        title: "明细",
        dataIndex: "recordType",
        key: "recordType",
        render: (text, render) => {
          const arr = {
            CBGM: "宠币购买", LWZS: "礼物赠送", CBKJ: "宠币扣减", HQMXYCJ: "哈奇马幸运抽奖",CBGMZS:"宠币赠送"
          }
          return arr[text]
        }
      },
      {
        title: "时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "充币数量",
        dataIndex: "changeCoin",
        key: "changeCoin",
        render: (text, record) => {
          return record.type === "S" ? "+" + (text/10) : (text/10)  
        },
      },
      {
        title: "变更后宠币数量",
        dataIndex: "afterChangeCoin",
        key: "afterChangeCoin",
        render: (text) => {
          return (Number(text) /10).toString()
        }
      },
      {
        title: "备注",
        dataIndex: "remark",
        key: "remark",
      },
    ],
    dataSource: [],
    search: "",
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    newColumns: [],
    form_show: true,
    searchOption: [
      {
        field: 'coinRecordCode',
        label: '业务编号',
        placeholder: '请输入',
        required: false,
        rules: [],
        type: 'Input',
        defaultValue: ''
      },
      {
        field: 'type',
        label: '收支类型',
        placeholder: '请选择',
        required: false,
        rules: [],
        type: 'Select',
        options: [
          {
            label: '全部',
            value: "",
          },
          {
            label: '收入',
            value: "S",
          },
          {
            label: '支出',
            value: "Z",
          },
        ],
        defaultValue: ''
      },
      {
        field: 'time',
        label: '时间',
        placeholder: '请选择',
        required: false,
        rules: [],
        type: 'RangePicker',
        showTime: true
      },
      {
        field: 'recordType',
        label: '明细',
        placeholder: '请选择',
        required: false,
        rules: [],
        type: 'Select',
        options: [
          { value: "", label: '全部' },
          { value: "CBGM", label: '宠币购买' },
          { value: "LWZS", label: '礼物赠送' },
          // { value: "DDDK", label: '订单抵扣' },
          { value: "CBKJ", label: '宠币扣减' },
          { value: "HQMXYCJ", label: "哈奇马幸运抽奖"}
        ],
        defaultValue: ''
      },
    ],
    queryForm: {},
    stopReason: '',
    isvideoModalVisible: false,
    videoAddress: ""
  };

  componentDidMount() {
    this.getData()
  };

  // 获取表格数据
  getData = async (values) => {
    const { id } = this.props.match.params

    let { pageNo, pageSize } = this.state.pageData
    if (values && !_.isEmpty(values.time)) {
      values.startDate = getDateTime2(values.time[0])
      values.endDate = getDateTime2(values.time[1])
      delete values.time
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let { time, ...form } = { ...this.state.queryForm }
      const params = {
        pageNo,
        pageSize,
        ...values,
        memberId: parseInt(id)
      }
      let res = await apiGetWebMemberCoinRecordDetailPage(params)
      if (res.code === 0 && res.data) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount,
        })
      }
    })

  };

  onStopAreaChange = (e) => {
    // console.log('Change:', e.target.value);
    this.setState({
      stopReason: e.target.value
    })
  };

  //
  videoDialog = (e) => {
    this.setState({
      isvideoModalVisible: true,
      videoAddress: e
    })
  }
  videoOk = async () => {
    this.setState({
      isvideoModalVisible: false,
      videoAddress: ""
    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData(this.state.queryForm)
    })
  };

  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }

  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }

  onFormSearch(values) {
    this.setState({
      queryForm: values,
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }

  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
      searchOption,
      form_show,
      newColumns,
      isvideoModalVisible, videoAddress
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <GoBack history={this.props.history} title="" />

        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
          onGetValues={(values) => this.onFormSearch(values)}
          onReset={(values) => this.onReset(values)}
        >
        </TheQueryForm>
        宠币明细
        <TheTableExtend
          columns={columns}
          onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)} 
        >
        </TheTableExtend>
        <TheTable
          columns={newColumns}
          dataSource={dataSource}
          rowKey={'configCarouselId'}
        />
        <ThePagination
          pageNo={pageNo}
          pageSize={pageSize}
          total={total}
          pageChange={this.pageChange}
        />
        {isvideoModalVisible ?
          <Modal visible={isvideoModalVisible} onOk={this.videoOk} onCancel={this.videoOk}>
            <VideoPlayer src={videoAddress} />
          </Modal> : null}
      </div>
    );
  }
}

export default screenAD;
